<template>
	<mk-echart :options="options" :key="key"></mk-echart>
</template>

<script>
	import MkEchart from '../../libs/index.vue'
	export default {
		name: 'doubleColumnar',
		components: {
			MkEchart
		},
		props: {
			xData: { // x轴数据
				type: Array,
				default: () => []
			},
			highData: { // 高血压
				type: Array,
				default: () => []
			},
			lowData: { // 低血压
				type: Array,
				default: () => []
			},
			reduceData: { // 高血压-低血压，用于画两点间的竖线
				type: Array,
				default: () => []
			}
		},
		watch: {
			xData: {
				deep: true,
				handler(val) {
					this.options.xAxis.data = val;
					this.$nextTick(() => {
						this.key = new Date().getTime();
					})
				}
			},
			reduceData: {
				immediate:true,
				handler() {
					this.setOptions()
				}
			}
		},
		data() {
			return {
				key: new Date().getTime(),
				val: 0,
				options: {}
			}
		},
		created() {
			this.setOptions()
		},
		mounted() {
			this.setOptions()
		},
		methods: {
			setOptions() {
				var index=0;
				const that = this
				let options = {
					tooltip: {
						trigger: 'item',
						position: 'top',
						formatter: '{e0}/{c0}mmHg',
						borderColor: '#ffffff',
						padding: [2, 5, 2, 5]
					},
					grid: {
						top: '3%',
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						data: this.xData,
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							color: '#333333',
							fontSize: 10,
						},
					},

					yAxis: {
						type: 'value',
						min: 40,
						max: 200,
						// splitNumber : 11,
						interval: 20,
						splitLine: {
							lineStyle: {
								type: 'dashed', // y轴分割线类型
								type: [5, 5]
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#333333',
							fontSize: 10,
						}
					},

					series: [{
							type: 'bar',
							stack: 'Total',
							itemStyle: {
								borderColor: 'transparent',
								color: 'transparent'
							},
							data: this.lowData,
							markArea: {
								itemStyle: {
									color: "#fff2e5"
								},
								data: [
									[{
										yAxis: '90',
										itemStyle: {
											color: '#fff',
										}
									}, {
										yAxis: '140'
									}]
								]
							},
							markLine: {
								symbol: 'none',
								lineStyle: {
										type: 'dashed', // y轴分割线类型
										type: [5, 5],
										color:'#D71B21 ' 
								},
								label: {
									show: true
								},
								data: [
									{
										yAxis: '90',
										label: {
											formatter: '90 ',
											color: '#6F7980',
											fontSize: 10,
											position: 'start'
										}
									},
									{
										yAxis: '140',
										label: {
											formatter: ''
										}
									}
								],
							},

						},
						{
							name: '高血压',
							type: 'bar',
							stack: 'Total',
							itemStyle: { // 竖线颜色
								color: '#EDEDF0'
							},
							barWidth: 2,
							data: this.reduceData, // 竖线的高度 最大值-最小值
						},
						{
							type: 'line',
							symbol: 'circle',
							label: {
								show: true,
								position: 'top',
								fontSize:'10px',
								formatter: function(params) {
									index = index + 1;
									if (index === 4) {
										index = 1
									}
									let color1 = ''
									let low=that.lowData[index - 1]
									if (low> 90) {
										color1 ='b1'
									} else {
										color1 = 'b2'
									}
									var rtn='';
									switch(uni.getSystemInfoSync().platform){
                    // 用于解决android和ios中显示的/问题
									  case  'android':
										  rtn= params.value > 140 ? `{b1|${params.value}}`+'/'+`{${color1}|${low}}` + 'mmHg' : `{b2|${params.value}}` + '/' +  `{${color1}|${low}}` + 'mmHg'
									  break;
									  case 'ios':
											rtn= params.value > 140 ? `{b1|${params.value}}`+'/\t'+`{${color1}|${low}}` + 'mmHg' : `{b2|${params.value}}` + '/\t' +  `{${color1}|${low}}` + 'mmHg'
									  break;
									  default:
											rtn= params.value > 140 ? `{b1|${params.value}}`+'/'+`{${color1}|${low}}` + 'mmHg' : `{b2|${params.value}}` + '/' +  `{${color1}|${low}}` + 'mmHg'
									  break;
									}
									return rtn;
								},
								rich: {
									b1: { color: '#D71B21'},
									b2: { color: '#333333'}
								}
							},
							symbolSize: 10, // 拐点大小
							data: this.highData,
							lineStyle: {
								color: 'transparent',
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: 'red'
								}
							},
							itemStyle: { // 拐点颜色
								color: function(params) {
									if (params.value > 140) {
										return '#D71B21'
									} else {
										return '#A4A3AA'
									}
								}
							}
						},
						{
							type: 'line',
							symbol: 'circle',
							symbolSize: 10,
							data: this.lowData,
							label: {
								show: true,
								position: 'bottom',
								fontSize:'10px',
								formatter: function(params) {
									return ''
								},
							},
							lineStyle: {
								color: 'transparent',
							},
							itemStyle: {
								color: function(params) {
									if (params.value > 90) {
										return '#D71B21'
									} else {
										return '#A4A3AA'
									}
								}
							}
						}
					]
				}
				this.options = options
			}
		}

	}
</script>

<style>
</style>
